<template>
  <div class="tab-container">
    <div style="display:flex">
      <el-input class="input" v-model="value" prefix-icon="el-icon-search" placeholder="请输入机构名称" style="width: 244px;"  @input='inputChangeSearch' />
      <el-button style="height:30px;line-height:0px;margin-left: 10px;padding-left: 23px;padding-right: 23px;margin-left:13px" class="button" type="primary" @click="submitInputChange" >搜索</el-button>
    </div>

    <!--<el-button type="primary" style="float:right;margin-left: 10px;">添加教师信息</el-button>-->
    <el-dropdown style="float:right;margin-left: 10px; color: #0a76a4" trigger="click" @command='exclExportChange' >
      <span class="el-dropdown-link"  style="color:#409EFF;cursor: pointer;">
        <i class="el-icon-download"></i> 导出<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item icon="el-icon-plus" command="a" >导出此页</el-dropdown-item>
        <el-dropdown-item icon="el-icon-plus" command="b" >导出全部</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- type="border-card" -->
    <el-tabs v-model="activeName" style="margin-top:15px;"  @tab-click="handleClick">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
        <keep-alive>
          <!-- <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" /> -->
          <tab-pane ref="child" v-if="activeName==item.key" :list="informListData"  :type="activeName" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import TabPane from './components/TabPane'
  import export_table_to_excel from '@/vendor/Export2Excel'
  export default {
    components: { TabPane },
    data() {
      return {
        // 举报核实列表数据
        informListData:[],
        tabMapOptions: [
          { label: '未核实', key: '0' },
          { label: '已核实', key: '1' },
          { label: '已执法', key: '2' },

        ],
        activeName: '0',
        createdTimes: 0,
        type:'0',
        // 搜索的内容
        value:'',
         currentPage:1,
          // 分页加载
        loading: false,
        pageSizes: [10, 50, 100, 200, 500],
        pagesize:10,
        total: 0,
        currentPage:1,
        // 条数
        val:''
      }
    },
    watch: {
      activeName(val) {
        console.log('监听首页val',val)
        // 默认导航显示
        // this.activeName='D'
        this.$router.push(`${this.$route.path}?tab=${val}`)
      },
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          if(val.query.status==1){
            // 监听确定审批成功后过来默认显示的已审核导航栏
            this.activeName='1'
          }
        }
      }
    },
    created() {
      const tab = this.$route.query.tab
      if (tab) {
        this.activeName = tab
      }
       if(this.$route.params.tabbar){
        this.activeName=this.$route.params.tabbar
      }
      // 获取举报核实列表数据
      this.getReportListData()
    },
    methods: {
        // 条数变化
      handleSizeChange(val) {
        console.log('条数变化',val)
        // 条数赋值
        this.val=val
        this.currentPage = 1;
        this.pagesize = val
        this.getReportListData()

      },
      // 换页
      handleCurrentChange(val) {
        console.log('页数变化',val)
        this.currentPage = val;
        this.getReportListData()
      },
        // 获取举报核实列表相关数据
      getReportListData(){
        this.$http({
          url: this.$http.adornUrl('/sys/report/reportList?type='+this.activeName+'&limit='+this.pagesize+'&page='+this.currentPage
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          this.loading = false
          if(res.data.code==0){
            this.informListData=res.data.page.list
            this.total=res.data.page.totalCount
          }
        })
      },
      // 搜索事件
      inputChangeSearch(e){
        this.value=e

      },
      // 搜索提交事件
      submitInputChange(){
        // 先清空子组件列表数据在请求
        this.currentPage=1
        this.pagesize=10
        this.informListData=[]
        this.$nextTick(() => {
          var _this = this;
          this.$http({
            url: this.$http.adornUrl('/info/searchKey?key='+this.value+'&type=2&page='+this.currentPage+'&limit='+this.pagesize+'&result='+_this.activeName+'&status='+_this.activeName
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            if(res.data.code==0){
              // 将搜所数据赋值
              this.informListData=res.data.page.list
           }else{
             this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
            }
          })
          // console.log('获取子组件里的东西',_this.$refs.child[0].list)
            // setTimeout(() => {
            //     _this.getHeight();
            // }, 200);
        });
      },
        // 导出此页
      exclExportChange(event){
        console.log('获取导出的',event)
        if(event=='a'){
          // 点击的是导出此页
          // 导出机构入驻审批列表
          export_table_to_excel('#inform','举报核实系统')
        }else {
          if(this.val==500){
            export_table_to_excel('#inform','举报核实系统')
          }else {
            this.$message.error('请先将页数调制每页500条后,再导出')
          }
        }
      },
      // 已核实，未核实点击事件
      handleClick(tab,event){
        console.log('获取点击的电机的',tab.name)
        this.activeName=tab.name
        // 清空子组件里的数据列表 重新请求
        this.informListData=[]
        this.getReportListData()
      }
      // showCreatedTimes() {
      //   this.createdTimes = this.createdTimes + 1
      // }
    }
  }
</script>

<style scoped lang="scss">
  .tab-container {
    /* margin: 30px; */
    /deep/.el-tabs__nav-wrap{
      width: 100%;
    }
  }
  // 设置搜索框高度未30
  .input{
    /deep/.el-input__inner{
      height: 30px;
    }
     /deep/.el-input__icon{
      line-height: 30px;
    }
  }
  .button{
    /deep/.el-button{
      // border: 1px solid red;
    }

  }

</style>
